<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
       h1,h2,p{
        text-align: center;
        color:red;
        font-size: 300%;
       }
       ol li{
        color: green;
       }
       ul a{
        color:yellow;
       }
       .one li a{
        color: red;
       }
       /* 都会选中 */
       /* .two a{
        color: aquamarine;
       } */
       .two>a{
        color: aquamarine;
       }
       /* 练习1 */
       /* .cat a{
        color:red;
       } */
       /* 练习2 */
       .cat>a{
        color: red;
       }
    </style>

</head>
<body>
    <h1>这是一个分组选择器</h1>
    <h2>更小的标题</h2>
    <p>这是一个段落</p>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>还可以是孙子</li>
        <li><a href="#">mmmm</a></li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>

    <ol class="one">
        <li>可以是基础选择器的组合</li>
        <li>ddd</li>
        <li>eee</li>
        <li><a href="#">fff</a></li>
        <li><a href="#">fff</a></li>
        <li><a href="#">fff</a></li>
    </ol>
    <div class="two">
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>
    <div class="cat">
        <ul>
        <li>练习1</li>
        <li><a href="#">小猫</a></li>
        <li><a href="#">小猫</a></li>
        <li><a href="#">小猫</a></li>
        </ul>
    </div>
    <div class="cat">
        <li>练习2</li>
        <a href="#">小猫</a>
        <ul>
        <li><a href="#">小狗</a></li>
        <li><a href="#">小狗</a></li>
        </ul>
    </div>
</body>
</html>